<template>
    <el-dialog
        v-model="visible"
        :width="modelWidth"
        top="10vh"
        @closed="handleClose"
    >
        <template #header>
            <div class="custom-header">{{ modalTitle }}</div>
        </template>
        <div>
            <el-form :model="baseForm" ref="updateRecordRef" :rules="updateRecordRules">
                <el-form-item label="标签名称" label-width="100px" prop="standardName">
                    <el-input v-model="baseForm.name" placeholder="请输入标签名称"/>
                </el-form-item>
                <el-form-item label="备注" label-width="100px">
                    <el-input
                        v-model="baseForm.remark"
                        :rows="2"
                        type="textarea"
                        placeholder="请输入备注"
                    />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="base-btn">
                <el-button @click="submit(updateRecordRef)" type="primary">保存</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import type { FormInstance,FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { categoryInsertApi, categoryUpdateApi } from '@/api/tag/base'

const props = defineProps({
	modelWidth: {
		type: String,
		default: '600px'
	},
	modalTitle: {
		type: String,
		default: ''
	}
})
interface BaseForm {
    type: string | Number
    name: string
    weight: string | Number
    remark: string
}
const baseForm = reactive<BaseForm>({
    type: "",
    name: '',
    weight: 0,
    remark: ''
})
const visible = ref(false)
const updateFlag = ref(false)
const updateRecordRef = ref<FormInstance>()
const updateRecordRules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入标签名称', trigger: 'blur' }
    ],
})

const emit = defineEmits(['update:modelValue', 'refreshDataList'])

// const dialogVisible = computed({
// 	get: () => props.modelValue,
// 	set: val => emit('update:modelValue', val)
// })

const init = (isUpdate: boolean, row: any) => {
    updateFlag.value = isUpdate
    Object.assign(baseForm, row)
    visible.value = true
    // console.log("编辑画面：", isUpdate, baseForm)
}
const submit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            
            if(updateFlag.value) {
                addRecordMethods(baseForm)
            } else {
                updateRecordMethods(baseForm)
            }
            visible.value = false
            formEl.value?.resetFields()
        } else {
            console.log('提交错误', fields)
        }
    })
	
}
// 新增
const addRecordMethods = async (data: any) => {
    await categoryInsertApi(data).then(res => {
        ElMessage.success({
            message: '操作成功',
            duration: 500,
        })
        emit("refreshDataList")
    })
}
// 编辑
const updateRecordMethods = async (data: any) => {
    await categoryUpdateApi(data).then(res => {
        ElMessage.success({
            message: '操作成功',
            duration: 500,
        })
        emit("refreshDataList")
    })
}
defineExpose({
	init
})
</script>
<style lang="scss" scoped>
.base-btn {
    padding-bottom: 20px;
    text-align: center;
}
.dialog-header{
    width: 100%;
    height: 48px;
    background-color: rgba(51,51,51,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title{
        font-size: 14px;
        color: #333;
        margin-left: 16px;
        font-weight: bold;
    }

    .close{
        margin-right: 16px;
        cursor: pointer;
    }
}
</style>
